/**
 * 编辑页面离开提示
 * EditPageLeavePrompt
 *
 * 在使用页面中写入方法 getIsEdited
 */

import { MessageBox } from "element-ui";
export default {
  methods: {
    /**
     * 接口、获取当前是否已经编辑过的
     * @interface
     */
    getIsEdited() {},
    demo() {},
    _beforeunloadHandler(event) {
      // const isEdit = this.getIsEdited && this.getIsEdited()
      if (true) {
        event.preventDefault();
        console.log("event.returnValue", event.returnValue);
        event.returnValue = "您在页面编辑了未保存，是否确认离开";
        return "您在页面编辑了未保存，是否确认离开";
      }
    },
  },

  mounted() {
    if (process.env.NODE_ENV !== "production") {
      if (typeof this.getIsEdited !== "function") {
        console.warn(
          "tips: 使用 EditPageLeavePrompt 要有 this.getIsEdited 方法"
        );
      }
    }

    window.addEventListener("beforeunload", this._beforeunloadHandler);
  },

  beforeDestroy() {
    window.removeEventListener("beforeunload", this._beforeunloadHandler);
  },

  beforeRouteLeave(to, form, next) {
    // const isEdit = this.getIsEdited && this.getIsEdited()
    if (true) {
      // *** 此处必须要加延迟执行、不加的话点击浏览器按钮时会存在问题，弹框一闪而过，
      // 页面没有变，但是地址已经变了
      setTimeout(() => {
        MessageBox({
          title: "提示",
          message: `
            <div style="min-height: 50px; line-height: 22px;">
            <i class="el-icon-warning" style="color: rgb(90, 164, 255); font-size: 20px; vertical-align: middle;"></i>
            <span style="color: rgb(48, 49, 51);">您在页面编辑了未保存，是否确认离开</span>
          </div>
          `,
          showCancelButton: true,
          dangerouslyUseHTMLString: true,
          // type: 'warning',
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(() => {
            this.demo();
            // 正常跳转
            next();
          })
          .catch(() => {
            // // 如果取消跳转地址栏会变化，这时保持地址栏不变
            next(false);
            // 正常跳转
          });
      }, 100);
    } else {
      next();
    }
  },
};
